$(function(){
    let { layer } = layui
    let { form } = layui
    // ==================== 下拉菜单 ========================
    initCate()
    function initCate() {
        $.ajax({
            method:'GET',
            url:'/my/article/cates',
            success:function(res){
                if (res.status !== 0) return layer.msg('获取失败!')
                let html = template('tpl-cate',res)
                $('[name=cate_id]').html(html)
                // 重新渲染表单结构
                form.render()
            }
        })
    }
    // ================ 初始化富文本编辑器 =====================
    initEditor()
    // =================== 封面裁剪区域 =======================
    // 1. 初始化图片裁剪器
    var $image = $('#image')
    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3. 初始化裁剪区域
    $image.cropper(options)
    // 选择封面
    $('#btnChooseImage').on('click', function() {
        $('#coverFile').click()
    })
    // 选择图片放到裁剪区
    $('#coverFile').on('change',function(e){
        let files = e.target.files
        if (files.length <= 0) return
        //数组解构 files[0]
        let [file] = files
        // 根据文件，创建对应的 URL 地址
        var newImgURL = URL.createObjectURL(file)
        // 为裁剪区域重新设置图片
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })
    // ================ 发布文章 ====================
    let art_state = '已发布'
    $('#btnSave2').on('click',function(){
        art_state = '草稿'
    })
    $('#form-pub').on('submit',function(e){
        e.preventDefault()
        let fd = new FormData(this)
        fd.append('state',art_state)
        $image.cropper('getCroppedCanvas', {
          // 创建一个 Canvas 画布
          width: 400,
          height: 280
        }).toBlob(function(blob) {
          // 将 Canvas 画布上的内容，转化为文件对象
          // 得到文件对象后，进行后续的操作
          // 5. 将文件对象，存储到 fd 中
          fd.append('cover_img', blob)
          // 6. 发起 ajax 数据请求
          publishArticle(fd)
        })
    })
    function publishArticle(data) {
        $.ajax({
            method:'POST',
            url:'/my/article/add',
            data:data,
            contentType: false,
            processData: false,
            success:function(res){
                if (res.status !== 0) return layer.msg('发布失败!')
                layer.msg('发布成功!')
                location.href = '../article/art_list.html'
            }
        })
    }
})